<template>
  <view>
    <view class="options" :style="{bottom: (GET_SAFEAREA_BOTTOM > 0 ? GET_SAFEAREA_BOTTOM : 34) + 'px'}">
      <view v-if="type == '2'" class="options-left" @click="showComment">感兴趣的话，留个言吧</view>
      <view class="options-right">
        <view class="option">
          <image 
            class="img" 
            :src="currentData.hasCollect ? `${img_baseUrl}/statics/std/static/new/shoucang1.png` : `${img_baseUrl}/statics/std/static/new/shoucang0.png`"
            @click="collectFun"
          ></image>
          <text class="text">{{ currentData.collectNum > 999 ? "999+" : currentData.collectNum }}</text>
        </view>
        <view class="option">
          <image 
            class="img" 
            :src="currentData.hasLikes ? `${img_baseUrl}/statics/std/static/new/dianzan1.png` : `${img_baseUrl}/statics/std/static/new/dianzan0.png`"
            @click="likeFun"
          ></image>
          <text class="text">{{ currentData.likes > 999 ? "999+": currentData.likes }}</text>
        </view>
      </view>
    </view>
    <uni-popup
      ref="popupComment"
      type="bottom"
      :backgroundColor="'#ffffff'"
      :transStyle="{
        borderTopLeftRadius: '40rpx',
        borderTopRightRadius: '40rpx',
        overflow: 'hidden',
      }"
    >
      <view class="popup-content">
        <image
          class="popup-close"
          src="@/static/close2.png"
          @click="closePopup"
        ></image>
        <view class="title">共 {{ total }} 条评论</view>
        <scroll-view class="text" :scroll-y="true" @scrolltolower="getCommentList">
          <view class="myList" v-if="commentList.length > 0">
            <view class="item" v-for="(item, index) in commentList" :key="index">
              <image class="item-left" :src="img_baseUrl + item.avatar"></image>
              <view class="item-right">
                <text class="nickName">{{item.nickName}}</text>
                <text class="content">{{item.commentText}}</text>
                <text class="time">{{item.createTime}}</text>
              </view>
            </view>
          </view>
          <view class="noData" v-else>
          	<image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
          	<text>暂无评论</text>
          </view>
        </scroll-view>
        <view class="comment" :style="{bottom: (GET_SAFEAREA_BOTTOM > 0 ? GET_SAFEAREA_BOTTOM : 34) + 'px'}">
          <input class="input" v-model="comment" placeholder="发布一条留言" />
          <view class="right" @click="commentFun">
            <text>发布</text>
            <image src="@/static/fabu-blue.png"></image>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {
  	mapGetters
  } from 'vuex'
  import store, {
  	GET_SAFEAREA_BOTTOM
  } from '../store/index.js';
  import requestPost, {requestGet} from "@/utils/request";
  export default {
    name:"actionBar",
    props: ["optionData", "viewPath", "type"],  // type=1,文章类型，type=2，游记类型
    data() {
      return {
        img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
        currentData: {
          hasCollect: false,
          collectNum: 0,
          hasLikes: false,
          likes: 0
        },
        pages: {
          pageNum: 1,
          pageSize: 10
        },
        loadMore: true,
        total: 0,
        commentList: [],
        comment: ""
      }
    },
    computed: {
    	...mapGetters([GET_SAFEAREA_BOTTOM]),
      userInfo(){
        return Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni
				.getStorageSync('X-UserInfo') : null;
      }
    },
    mounted() {
    	console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
    },
    watch: {
      optionData: {
        handler(value) {
          this.currentData = value;
        },
        immediate: true,
        deep: true
      },
    },
    methods: {
      collectFun(){
        if(this.checkedLogin()){
          const hasCollect = this.currentData.hasCollect || false;
          if(hasCollect){
            uni.showLoading({title: '取消收藏中'});
            requestGet( this.type == 1 ? "/content/cancel/colect" : "/applet/notes/cancel/colect",{id: this.currentData.id}, '/baseplatform').then(check => {
              if(check.code === 200){
                uni.hideLoading();
                uni.showToast({title: '取消收藏成功！'});
                this.currentData.hasCollect = false;
                this.currentData.collectNum--;
              }else{
                uni.hideLoading();
                uni.showToast({title: check.msg || '操作失败！', icon: 'none'});
              }
            })
          }else{
            uni.showLoading({title: '收藏中'});
            requestPost( this.type == 1 ? "/content/collect" : "/applet/notes/collect",{bizId: this.currentData.id, viewPath: this.viewPath}, '/baseplatform').then(check => {
              if(check.code === 200){
                uni.hideLoading();
                uni.showToast({title: '收藏成功！'});
                this.currentData.hasCollect = true;
                this.currentData.collectNum++;
              }else{
                uni.hideLoading();
                uni.showToast({title: check.msg || '操作失败！', icon: 'none'});
              }
            })
          }
        }
      },
      likeFun(){
        if(this.checkedLogin()){
          const hasLikes = this.currentData.hasLikes || false;
          if(hasLikes){
            uni.showLoading({title: '取消点赞中'});
            requestGet( this.type == 1 ? "/content/cancel/likes" : "/applet/notes/cancel/likes",{id: this.currentData.id}, '/baseplatform').then(check => {
              if(check.code === 200){
                uni.hideLoading();
                uni.showToast({title: '取消点赞成功！'});
                this.currentData.hasLikes = false;
                this.currentData.likes--;
              }else{
                uni.hideLoading();
                uni.showToast({title: check.msg || '操作失败！', icon: 'none'});
              }
            })
          }else{
            uni.showLoading({title: '点赞中'});
            requestGet( this.type == 1 ? "/content/likes" : "/applet/notes/likes",{id: this.currentData.id}, '/baseplatform').then(check => {
              if(check.code === 200){
                uni.hideLoading();
                uni.showToast({title: '点赞成功！'});
                this.currentData.hasLikes = true;
                this.currentData.likes++;
              }else{
                uni.hideLoading();
                uni.showToast({title: check.msg || '操作失败！', icon: 'none'});
              }
            })
          }
        }
      },
      commentFun(){
        uni.showLoading({title: '评论发布中'});
        requestPost( "/applet/notes/publish/comment",{bizId: this.currentData.id, commentText: this.comment}, '/baseplatform').then(check => {
          if(check.code === 200){
            uni.hideLoading();
            uni.showToast({title: '发布成功！'});
            this.comment = "";
            this.loadMore = true;
            this.pages.pageNum = 1;
            this.commentList = [];
            this.getCommentList();
          }else{
            uni.hideLoading();
            uni.showToast({title: check.msg || '发布失败！', icon: 'none'});
          }
        })
      },
      getCommentList(){
        // 查询文章上送bizId=&typeCode=article&pageNum=1&pageSize=10，查询游记评论bizId=&typeCode=travel&pageNum=1&pageSize=10
        if (!this.loadMore) {
        	return
        }
        uni.showLoading({title: '评论加载中'});
        requestGet( "/commentdata/applet/list",{bizId: this.currentData.id,typeCode: 'travel',...this.pages}, '/baseplatform').then(check => {
          uni.hideLoading();
          if(check.code === 200){
            this.total = check.total;
            this.commentList = check.rows;
            if (this.commentList.length < this.total) {
            	this.loadMore = true;
            	this.pages.pageNum = this.pages.pageNum + 1;
            } else {
            	this.loadMore = false;
            }
          }else if(check.code == 401){
            this.closePopup();
          }else{
            this.loadMore = false;
          }
        })
      },
      showComment(){
        if(this.checkedLogin()){
          this.$refs.popupComment.open();
          this.comment = "";
          this.loadMore = true;
          this.pages.pageNum = 1;
          this.commentList = [];
          this.getCommentList();
        }
      },
      closePopup() {
        this.$refs.popupComment.close();
      },
      checkedLogin(){
        const userInfo = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni
				.getStorageSync('X-UserInfo') : null;
        if (!userInfo) {
          uni.showModal({
          	title: '提示',
          	content: '您还没有登录，请前往登录',
          	showCancel: true,
          	success: function(res) {
          		if (res.confirm) {
          			uni.navigateTo({
          				url: '/pages/login/index'
          			});
          		} else if (res.cancel) {
          			console.log('用户点击取消');
          		}
          	}
          });
        	return false
        }else{
          return true
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .options{
    position: fixed;
    bottom: 40rpx;
    right: 40rpx;
    left: 40rpx;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    .options-left{
      flex: 1;
      width: auto;
      height: 88rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149,157,165,0.2);
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      margin-right: 10rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0,0,0,0.3);
      line-height: 88rpx;
      text-align: left;
      padding-left: 40rpx;
    }
    .options-right{
      flex: 0 0 auto;
      width: 264rpx;
      height: 88rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(149,157,165,0.2);
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      .option{
        width: 64rpx;
        position: relative;
        margin-left: 40rpx;
        .img{
          height: 64rpx;
          width: 64rpx;
        }
        .text{
          position: absolute;
          top: 8rpx;
          left: 44rpx;
          width: auto;
          height: 24rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #5F6F86;
          background-color: white;
        }
      }
      
    }
  }
  .popup-content {
    width: 100%;
    height: 70vh;
    position: relative;
    .popup-close {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      right: 40rpx;
      top: 0rpx;
      z-index: 1;
    }
    .title{
      height: 48rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #3D3D3D;
      line-height: 48rpx;
      margin-top: 40rpx;
      margin-left: 40rpx;
    }
    .myList{
      height: calc(70vh - 270rpx);
      padding: 40rpx;
      .item{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 16rpx;
        margin-top: 48rpx;
        .item-left{
          width: 72rpx;
          height: 72rpx;
          border-radius: 36rpx;
          margin-right: 16rpx;
          flex: 0 0 auto;
        }
        .item-right{
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          .nickName{
            height: 40rpx;
            font-size: 28rpx;
            font-weight: 700;
            color: rgba(0,0,0,0.8);
            line-height: 40rpx;
          }
          .content{
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(0,0,0,0.7);
            line-height: 48rpx;
            margin: 8rpx 0;
            word-break: break-all;
          }
          .time{
            height: 34rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0,0,0,0.5);
            line-height: 34rpx;
          }
        }
      }
    }
    .comment{
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 120rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.09);
      border-radius: 24rpx 24rpx 0rpx 0rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .input{
        flex: 1;
        margin-left: 40rpx;
      }
      .right{
        margin-right: 40rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        text{
          width: 56rpx;
          height: 40rpx;
          font-size: 28rpx;
          font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
          font-weight: 400;
          color: #2187FF;
          line-height: 40rpx;
          flex: 0 0 auto;
        }
        image{
          height: 36rpx;
          width: 36rpx;
          margin-left: 8rpx;
          flex: 0 0 auto;
        }
      }
    }
  }
</style>